<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            border: 1px solid black;
            padding: 20px;
        }
    </style>
    <link rel="stylesheet" href="../../assets/animate/animate.css">
</head>
<body>
    <div id="app" class="box">
        <h5>父组件</h5>
        <!-- 父组件msg -->
        <p>msg:{{ msg }}</p>
        <comp-one>
            <!-- 模板语法的变量取值来自于所属容器对应的实例的数据仓库或者方法仓库 -->
            <!-- 模板语法定义于那个容器，对应的实例就是该容器对应的实例 -->
            <p>分发内容:{{ msg }}</p>
        </comp-one>
        <hr>
        <!-- 
            页面结构+数据的传递-作用域分发 
                作用域分发:vue通过属性绑定的规则，为slot分发组件回传相关变量数据，让组件调用时的额外内容或标签可以使用回传的变量
        -->
        <input type="button" value="addNewItem" @click="addNewItem()">
        <data-list :arr="arr">
            <template v-slot:default="props">
                {{ props.row.name }} - <input type="button" value="删除"> <br>
            </template>
            <!-- # 是 v-slot: 的缩写 -->
            <template #test="props">
                <p>{{ props.obj.name }}</p>
            </template>
            <!-- 作用域解构分发 ，v-slot:名称=" 使用ES6的解构赋值规则 " -->
            <!-- 分发的回传数据对于的变量名叫做 user,和标签所属的父组件容器对应的实例数据仓库变量名相同，
                所以优先使用分发回传的数据边框
            -->
            <!-- <template #demo=" { user } ">
                <p>{{ user.name }}</p>
            </template> -->
            <!-- ES6的解构是可以重新命名变量的 -->
            <template #demo=" { user:a } ">
                <p>{{ user.name }}:{{ a.name }}</p>
            </template>
        </data-list>
        <hr>
        <data-list :arr="stus">
            <template v-slot:default="{ row,$index }">
                <span v-show="!row.edit"> {{ row.name }}</span>
                <!-- <input v-show="row.edit" type="text" v-model="stus[$index].name"> -->
                <!-- 引用数据的操作 -->
                <input v-show="row.edit" type="text" v-model="row.name">
                <br>
                <input type="button" value="删除" @click="removeStu($index)"> 
                <!-- <input type="button" value="编辑|完成" @click="changeEdit($index)"> -->
                <input type="button" value="编辑|完成" @click="row.edit=!row.edit">
                
            </template>
        </data-list>
    </div>

    <script type="text/x-template" id="compOne">
        <div class="box">
            <h5>子组件</h5>
            <!-- 子组件msg -->
            <p>msg:{{ msg }}</p>
            <slot></slot>
        </div>
    </script>

    <script type="text/x-template" id="dataList">
        <ul>
            <transition-group
                enter-active-class="animate__animated animate__fadeInRight"
                leave-active-class="animate__animated animate__fadeOutLeft"
            >
                <li class="item" v-for="(item,i) in arr" :key="item.id">
                    <slot :row="item" :$index=" i "></slot>
                    <slot name="test" :obj="item"></slot>
                    <slot name="demo" :user="item"></slot>
                </li>
            </transition-group>
        </ul>
    </script>

    <script src="../../assets/mock/mock-min.js"></script>
    <script type="module"> 
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data(){
                return {
                    msg:"父组件msg",
                    arr:Mock.mock({
                        "list|4":[
                            { id:"@id",name:"@cname" }
                        ]
                    }).list,
                    user:{
                        name:"tom",
                        id:111111
                    },
                    stus:Mock.mock({
                        "list|4":[
                            { id:"@id",name:"@cname",edit:false }
                        ]
                    }).list,
                }
            },
            methods: {
                addNewItem() {
                    this.arr.push(Mock.mock( { id:"@id",name:"@cname" } ))
                },
                removeStu(i){
                    this.stus.splice(i,1)
                },
                changeEdit(i){
                    this.stus[i].edit = !this.stus[i].edit;
                }
            },
        });
        
        app.component("CompOne",{
            template:"#compOne",
            data() {
                return {
                    msg: "子组件msg"
                }
            },
        })

        app.component("DataList",{
            template:"#dataList",
            props:{
                arr:{
                    type:Array,
                    default(){
                        return []
                    }
                }
            }
        })
        
        app.mount("#app")


        // let name = "tom"
        // function show(){
        //     let name = "jack"
        //     console.log(name)
        // }
        // show();
    </script>
</body>
</html>